<template>
  <n-space vertical size="large" class="input">
    <n-layout>
      <n-layout-content content-style="padding: 24px;">


        <div onclick="router.push('/')">
          <n-gradient-text :size="48" type="info" style="margin-left: 32%">

              Compkey

          </n-gradient-text>
        </div>
      </n-layout-content>
    </n-layout>
    <n-layout-content content-style="padding: 0px;">
      <div>
        <n-input round placeholder="请输入关键字" size="large" clearable @keyup.enter="submit" @input="handleInput">
          <template #prefix>
            <n-icon :component="SearchOutline" />
          </template>
        </n-input>
      </div>
    </n-layout-content>
  </n-space>

  <div class="back">
    <n-gradient-text type="info">
      <router-link to="admin">后台管理</router-link>
    </n-gradient-text>
  </div>
</template>

<script setup lang="ts">
import { SearchOutline } from "@vicons/ionicons5";
import { useRouter } from "vue-router";
import { useLoadingBar } from "naive-ui";

const router = useRouter();
const loadingBar = useLoadingBar();

type compkey = {
  no: number;
  word: string;
  rate: number;
};

let input: string = "";

const handleInput = (str: string) => {
  input = str;
};

const submit = () => {
  if (input != null && input.length != 0) {
    console.log("搜索内容为： " + input);
    // loadingBar.start();
    // loadingBar.finish()
    router.push({
      path: "/result",
      query: { keyword: input },
    });

  } else {
    console.log("搜索框内容为空");
  }
};
</script>

<style scoped>
.input {
  position: fixed;
  top: 20%;
  left: 25%;
  width: 50%;
}

.back {
  position: fixed;
  right: 5%;
  bottom: 5%;
}
</style>
